<template>
  <div class="ai-solutions">
    <ServiceNav />
    
    <!-- 顶部Banner -->
    <div class="hero-section">
      <div class="container">
        <div class="hero-content">
          <h1 class="hero-title">定制企业专属的智能体</h1>
          <p class="hero-subtitle">打造智能化企业服务，提升效率与体验</p>
          <div class="hero-actions">
            <el-button type="primary" size="large" @click="startTrial">立即体验</el-button>
            <el-button @click="showQrcode" size="large">联系咨询</el-button>
          </div>
        </div>
        <div class="hero-image">
          <img src="@/assets/images/404.png" alt="企业AI智能体">
        </div>
      </div>
    </div>
    
    <!-- 多模型智能体对接 -->
    <div class="models-section">
      <div class="container">
        <h2 class="section-title">多模型智能体对接</h2>
        <p class="section-desc">支持主流大模型平台，快速集成到您的社交平台</p>
        
        <div class="models-grid">
          <div class="model-card" v-for="(model, index) in aiModels" :key="index">
            <img :src="model.logo" :alt="model.name" class="model-logo">
            <h3 class="model-name">{{ model.name }}</h3>
            <p class="model-desc">{{ model.description }}</p>
            <div class="model-tag">{{ model.tag }}</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 社交平台集成 -->
    <div class="integration-section">
      <div class="container">
        <h2 class="section-title">开放集成</h2>
        <div class="integration-platforms">
          <div class="platform-item" v-for="(platform, index) in platforms" :key="index">
            <div class="platform-icon">
              <el-icon :size="48"><component :is="platform.icon" /></el-icon>
            </div>
            <h3 class="platform-name">{{ platform.name }}</h3>
            <p class="platform-desc">{{ platform.description }}</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 多种智能场景 -->
    <div class="scenarios-section">
      <div class="container">
        <h2 class="section-title">多种智能场景</h2>
        <p class="section-desc">多种AI场景，工作流定制化</p>
        
        <el-row :gutter="30">
          <el-col :xs="24" :sm="12" :md="8" v-for="(scenario, index) in scenarios" :key="index">
            <div class="scenario-card">
              <div class="scenario-header">
                <h3>{{ scenario.title }}</h3>
                <div class="scenario-tags">
                  <el-tag v-for="(tag, i) in scenario.tags" :key="i" size="small">{{ tag }}</el-tag>
                </div>
              </div>
              <p class="scenario-desc">{{ scenario.description }}</p>
              <ul class="scenario-features">
                <li v-for="(feature, i) in scenario.features" :key="i">
                  <el-icon><Check /></el-icon> {{ feature }}
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    
    <!-- 配套SCRM系统 -->
    <div class="scrm-section">
      <div class="container">
        <h2 class="section-title">配套SCRM系统</h2>
        <p class="section-desc">全方位智能化运营，提升客户服务效率</p>
        
        <el-tabs class="scrm-tabs">
          <el-tab-pane v-for="(feature, index) in scrmFeatures" :key="index" :label="feature.name">
            <div class="scrm-content">
              <div class="scrm-image">
                <img :src="feature.image" :alt="feature.name">
              </div>
              <div class="scrm-info">
                <h3>{{ feature.name }}</h3>
                <div class="scrm-tags">
                  <el-tag v-for="(tag, i) in feature.tags" :key="i" size="small" effect="plain">{{ tag }}</el-tag>
                </div>
                <ul class="scrm-features">
                  <li v-for="(item, i) in feature.features" :key="i">
                    <el-icon><Check /></el-icon> {{ item }}
                  </li>
                </ul>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    
    <!-- 行业解决方案 -->
    <div class="industry-section">
      <div class="container">
        <h2 class="section-title">行业解决方案</h2>
        <p class="section-desc">为不同行业打造专属智能服务体验</p>
        
        <div class="industry-grid">
          <div class="industry-card" v-for="(industry, index) in industries" :key="index">
            <div class="industry-icon">
              <el-icon :size="48"><component :is="industry.icon" /></el-icon>
            </div>
            <h3 class="industry-title">{{ industry.title }}</h3>
            <p class="industry-desc">{{ industry.description }}</p>
            <ul class="industry-features">
              <li v-for="(feature, i) in industry.features" :key="i">
                <el-icon><Check /></el-icon> {{ feature }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 定价方案 -->
    <div class="pricing-section">
      <div class="container">
        <el-tabs v-model="activeTabName" class="pricing-tabs">
          <el-tab-pane label="AI智能体定制" name="customAI">
            <h2 class="pricing-title">AI智能体定制</h2>
            <p class="pricing-subtitle">选择适合您的计划，开启智能化升级</p>
            
            <div class="pricing-cards">
              <div class="pricing-card" v-for="(plan, index) in aiCustomPlans" :key="index">
                <h3 class="plan-name">{{ plan.name }}</h3>
                <div class="plan-price">
                  <span class="currency">¥</span>
                  <span class="amount">{{ plan.price }}</span>
                </div>
                <p class="plan-desc">{{ plan.description }}</p>
                <ul class="plan-features">
                  <li v-for="(feature, i) in plan.features" :key="i">
                    <el-icon><Check /></el-icon> {{ feature }}
                  </li>
                </ul>
                <el-button type="primary" @click="contactService">联系客服</el-button>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="微信/企业微信智能客服" name="wechatAI">
            <h2 class="pricing-title">微信/企业微信智能客服</h2>
            <p class="pricing-subtitle">为您的企业打造智能化客服体验</p>
            
            <div class="pricing-cards">
              <div class="pricing-card" v-for="(plan, index) in wechatPlans" :key="index">
                <h3 class="plan-name">{{ plan.name }}</h3>
                <div class="plan-price">
                  <span class="currency">¥</span>
                  <span class="amount">{{ plan.price }}</span>
                  <span class="period" v-if="plan.period">{{ plan.period }}</span>
                </div>
                <p class="plan-desc">{{ plan.description }}</p>
                <ul class="plan-features">
                  <li v-for="(feature, i) in plan.features" :key="i">
                    <el-icon><Check /></el-icon> {{ feature }}
                  </li>
                </ul>
                <el-button type="primary" @click="contactService">联系客服</el-button>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    
    <!-- 咨询CTA -->
    <div class="cta-section">
      <div class="container">
        <h2 class="cta-title">开始定制您的企业智能体</h2>
        <p class="cta-desc">立即体验智能化升级带来的效率提升</p>
        <div class="cta-actions">
          <el-button type="primary" size="large" @click="startTrial">立即体验</el-button>
          <div class="qrcode-container">
            <img src="@/assets/images/qrcode.png" alt="联系二维码" class="qrcode">
            <p>扫码咨询</p>
          </div>
        </div>
      </div>
    </div>
    
    <Footer />
    
    <!-- 联系对话框 -->
    <el-dialog v-model="qrcodeVisible" title="联系咨询" width="300px">
      <div style="text-align: center;">
        <img src="@/assets/images/qrcode.png" alt="联系二维码" style="width: 200px; height: 200px;">
        <p style="margin-top: 10px;">扫码添加客服</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { Check, ChatLineRound, Collection, DataAnalysis, Service, ShoppingBag, Van, OfficeBuilding, Avatar, Setting, Promotion } from '@element-plus/icons-vue';
import ServiceNav from '@/components/ServiceNav.vue';
import Footer from '@/components/Footer.vue';

export default defineComponent({
  name: 'AISolutions',
  components: {
    ServiceNav,
    Footer,
    Check,
    ChatLineRound,
    Collection,
    DataAnalysis,
    Service,
    ShoppingBag,
    Van,
    OfficeBuilding,
    Avatar,
    Setting,
    Promotion
  },
  setup() {
    const qrcodeVisible = ref(false);
    const activeTabName = ref('customAI');
    
    const aiModels = [
      {
        name: 'Coze',
        logo: '@/assets/images/coze-logo.png',
        description: '字节跳动旗下，豆包的企业版',
        tag: '10min 快速接入'
      },
      {
        name: 'FastGPT',
        logo: '@/assets/images/fastgpt-logo.png',
        description: '基于 LLM 大模型的开源 AI 知识库构建平台',
        tag: '丰富的工作流'
      },
      {
        name: 'Dify',
        logo: '@/assets/images/dify-logo.png',
        description: 'GenAI应用程序的创新引擎',
        tag: '私有化精选'
      },
      {
        name: 'Deepseek',
        logo: '@/assets/images/deepseek-logo.png',
        description: '深度求索的超热门大模型',
        tag: '热门模型'
      },
      {
        name: '自定义 API',
        logo: '@/assets/images/custom-api-logo.png',
        description: '灵活的接口对接方案',
        tag: '开放集成'
      }
    ];
    
    const platforms = [
      {
        name: '微信公众号',
        icon: 'ChatLineRound',
        description: '一键接入对话服务'
      },
      {
        name: '企业微信',
        icon: 'OfficeBuilding',
        description: '企业级应用部署'
      },
      {
        name: '微信群',
        icon: 'Collection',
        description: '群服务快速集成'
      }
    ];
    
    const scenarios = [
      {
        title: '智能客服',
        tags: ['微信', '企业微信'],
        description: '24/7 全天候智能客服，快速响应客户需求，提供专业解答，支持多场景定制化对话。',
        features: [
          '智能问答系统',
          '多轮对话能力',
          '情感分析处理'
        ]
      },
      {
        title: '生成式 AI',
        tags: ['文案创作', '内容生成'],
        description: '基于先进的生成式 AI 技术，为企业提供高质量的文案创作和内容生成服务。',
        features: [
          '营销文案生成',
          '产品描述优化',
          '多样化创意输出'
        ]
      },
      {
        title: '个性化工作流',
        tags: ['数据分析', '流程优化'],
        description: '根据企业需求，打造智能化的工作流。',
        features: [
          '聊天记录给用户打标签',
          '聊天记录总结',
          '客服对话记录清洗到知识库'
        ]
      }
    ];
    
    const scrmFeatures = [
      {
        name: '聚合聊天',
        tags: ['私聊提醒', '朋友圈'],
        image: '@/assets/images/chat-system.png',
        features: [
          '人工接管AI聊天',
          '个微/企微 群聊私聊一体化',
          '历史消息同步'
        ]
      },
      {
        name: 'SOP',
        tags: ['私聊提醒', '朋友圈'],
        image: '@/assets/images/sop-system.png',
        features: [
          '新购续费自动提醒',
          '智能朋友圈推送',
          '私聊消息管理'
        ]
      },
      {
        name: '自动加好友',
        tags: ['数据分析', '自定义时间'],
        image: '@/assets/images/auto-friend.png',
        features: [
          '自定义执行时间',
          '实时统计数据',
          '通过率分析'
        ]
      },
      {
        name: '无限制群发',
        tags: ['多类型消息', '精准触达'],
        image: '@/assets/images/mass-sending.png',
        features: [
          '多种消息类型',
          '按需群发',
          '数据追踪'
        ]
      }
    ];
    
    const industries = [
      {
        title: '智能旅游助手',
        icon: 'Van',
        description: '基于用户预算、时间和偏好，智能规划个性化旅游路线',
        features: [
          '个性化行程定制',
          '智能景点推荐',
          '预算优化方案'
        ]
      },
      {
        title: '智能招聘系统',
        icon: 'Avatar',
        description: '精准匹配职位与人才，提供智能化招聘解决方案',
        features: [
          '简历智能筛选',
          '职位智能匹配',
          '人才画像分析'
        ]
      },
      {
        title: '智慧健康管家',
        icon: 'Service',
        description: '个性化健康管理与咨询服务',
        features: [
          '健康状况跟踪',
          '饮食方案定制',
          '智能健康问答'
        ]
      },
      {
        title: '新零售助手',
        icon: 'ShoppingBag',
        description: '智能化社群运营与个性化商品推荐',
        features: [
          '智能商品推荐',
          '社群活跃度提升',
          '裂变营销方案'
        ]
      }
    ];
    
    const aiCustomPlans = [
      {
        name: '基础版',
        price: '4,999',
        description: '适合小型企业',
        features: [
          '知识库构建',
          '人设 Prompt 设计',
          '基础对话流设计',
          '技术支持'
        ]
      },
      {
        name: '企业版',
        price: '19,999',
        description: '适合中大型企业',
        features: [
          '完整工作流设计',
          '企业知识库构建',
          '客服场景意图分析',
          '技术支持'
        ]
      }
    ];
    
    const wechatPlans = [
      {
        name: '体验版',
        price: '1',
        description: '3天试用',
        tag: '快速体验',
        features: [
          '支持配置自己的智能体',
          '私聊仅自己',
          '1个群聊',
          '平台号'
        ]
      },
      {
        name: '个人版',
        price: '30',
        description: '30天试用',
        tag: '解决单群智能化',
        features: [
          '支持配置自己的智能体',
          '私聊仅自己',
          '1个群聊',
          '平台号'
        ]
      },
      {
        name: '社群版',
        price: '80',
        period: '/月',
        description: '社群智能化解决方案',
        features: [
          '支持配置自己的智能体',
          '私聊仅自己',
          '10个群聊',
          '平台号'
        ]
      },
      {
        name: '旗舰版',
        price: '200',
        period: '/月',
        description: '适合企业使用',
        features: [
          '支持配置多个的智能体',
          '无限私聊',
          '无限群聊',
          '品牌企业标识号'
        ]
      }
    ];
    
    const showQrcode = () => {
      qrcodeVisible.value = true;
    };
    
    const startTrial = () => {
      // 实现试用逻辑
    };
    
    const contactService = () => {
      showQrcode();
    };
    
    return {
      qrcodeVisible,
      activeTabName,
      aiModels,
      platforms,
      scenarios,
      scrmFeatures,
      industries,
      aiCustomPlans,
      wechatPlans,
      showQrcode,
      startTrial,
      contactService
    };
  }
});
</script>

<style lang="scss" scoped>
.ai-solutions {
  color: $text-primary;
  
  .container {
    max-width: $container-width;
    margin: 0 auto;
    padding: 0 $spacing-base;
  }
  
  .section-title {
    font-size: $font-size-extra-large;
    text-align: center;
    margin-bottom: $spacing-small;
  }
  
  .section-desc {
    font-size: $font-size-medium;
    text-align: center;
    color: $text-secondary;
    margin-bottom: $spacing-extra-large;
  }
}

.hero-section {
  padding: $spacing-extra-large 0;
  background: linear-gradient(135deg, #1890ff 0%, #36a9e1 100%);
  
  .container {
    display: flex;
    align-items: center;
    
    @media (max-width: 992px) {
      flex-direction: column;
      text-align: center;
    }
  }
  
  .hero-content {
    flex: 1;
    color: white;
    
    .hero-title {
      font-size: 40px;
      font-weight: bold;
      margin-bottom: $spacing-small;
    }
    
    .hero-subtitle {
      font-size: $font-size-large;
      margin-bottom: $spacing-large;
      opacity: 0.9;
    }
    
    .hero-actions {
      display: flex;
      gap: $spacing-base;
      
      @media (max-width: 768px) {
        justify-content: center;
      }
    }
  }
  
  .hero-image {
    flex: 1;
    text-align: center;
    
    img {
      max-width: 100%;
      height: auto;
    }
  }
}

.models-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-white;
  
  .models-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: $spacing-large;
  }
  
  .model-card {
    text-align: center;
    background-color: $background-color-white;
    border-radius: $border-radius-base;
    padding: $spacing-large;
    box-shadow: $box-shadow-light;
    width: 220px;
    transition: $transition-base;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: $box-shadow-base;
    }
    
    .model-logo {
      height: 60px;
      width: auto;
      margin-bottom: $spacing-base;
    }
    
    .model-name {
      font-size: $font-size-large;
      margin-bottom: $spacing-small;
    }
    
    .model-desc {
      font-size: $font-size-small;
      color: $text-secondary;
      margin-bottom: $spacing-base;
    }
    
    .model-tag {
      display: inline-block;
      padding: 4px $spacing-small;
      background-color: rgba($primary-color, 0.1);
      color: $primary-color;
      border-radius: $border-radius-base;
      font-size: $font-size-small;
    }
  }
}

.integration-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-base;
  
  .integration-platforms {
    display: flex;
    justify-content: center;
    gap: $spacing-large;
    
    @media (max-width: 768px) {
      flex-direction: column;
      align-items: center;
    }
  }
  
  .platform-item {
    text-align: center;
    background-color: $background-color-white;
    border-radius: $border-radius-base;
    padding: $spacing-large;
    box-shadow: $box-shadow-light;
    width: 220px;
    
    .platform-icon {
      color: $primary-color;
      margin-bottom: $spacing-base;
    }
    
    .platform-name {
      font-size: $font-size-medium;
      margin-bottom: $spacing-small;
    }
    
    .platform-desc {
      font-size: $font-size-small;
      color: $text-secondary;
    }
  }
}

.scenarios-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-white;
  
  .scenario-card {
    height: 100%;
    background-color: $background-color-white;
    border-radius: $border-radius-base;
    padding: $spacing-large;
    box-shadow: $box-shadow-light;
    margin-bottom: $spacing-large;
    transition: $transition-base;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: $box-shadow-base;
    }
    
    .scenario-header {
      margin-bottom: $spacing-base;
      
      h3 {
        font-size: $font-size-large;
        margin-bottom: $spacing-small;
      }
      
      .scenario-tags {
        .el-tag {
          margin-right: $spacing-small;
        }
      }
    }
    
    .scenario-desc {
      color: $text-secondary;
      margin-bottom: $spacing-base;
    }
    
    .scenario-features {
      li {
        display: flex;
        align-items: center;
        margin-bottom: $spacing-small;
        
        .el-icon {
          color: $success-color;
          margin-right: $spacing-small;
        }
      }
    }
  }
}

.scrm-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-base;
  
  .scrm-tabs {
    max-width: 900px;
    margin: 0 auto;
  }
  
  .scrm-content {
    display: flex;
    align-items: center;
    gap: $spacing-large;
    
    @media (max-width: 768px) {
      flex-direction: column;
    }
    
    .scrm-image {
      flex: 1;
      
      img {
        width: 100%;
        border-radius: $border-radius-base;
        box-shadow: $box-shadow-light;
      }
    }
    
    .scrm-info {
      flex: 1;
      
      h3 {
        font-size: $font-size-large;
        margin-bottom: $spacing-small;
      }
      
      .scrm-tags {
        margin-bottom: $spacing-base;
        
        .el-tag {
          margin-right: $spacing-small;
          margin-bottom: $spacing-small;
        }
      }
      
      .scrm-features {
        li {
          display: flex;
          align-items: center;
          margin-bottom: $spacing-small;
          
          .el-icon {
            color: $success-color;
            margin-right: $spacing-small;
          }
        }
      }
    }
  }
}

.industry-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-white;
  
  .industry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: $spacing-large;
    
    @media (max-width: 1200px) {
      grid-template-columns: repeat(2, 1fr);
    }
    
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  }
  
  .industry-card {
    background-color: $background-color-white;
    border-radius: $border-radius-base;
    padding: $spacing-large;
    box-shadow: $box-shadow-light;
    height: 100%;
    transition: $transition-base;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: $box-shadow-base;
    }
    
    .industry-icon {
      color: $primary-color;
      margin-bottom: $spacing-base;
    }
    
    .industry-title {
      font-size: $font-size-medium;
      margin-bottom: $spacing-small;
    }
    
    .industry-desc {
      color: $text-secondary;
      margin-bottom: $spacing-base;
    }
    
    .industry-features {
      li {
        display: flex;
        align-items: center;
        margin-bottom: $spacing-small;
        
        .el-icon {
          color: $success-color;
          margin-right: $spacing-small;
        }
      }
    }
  }
}

.pricing-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-base;
  
  .pricing-tabs {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .pricing-title {
    font-size: $font-size-extra-large;
    text-align: center;
    margin-bottom: $spacing-small;
  }
  
  .pricing-subtitle {
    font-size: $font-size-medium;
    text-align: center;
    color: $text-secondary;
    margin-bottom: $spacing-extra-large;
  }
  
  .pricing-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: $spacing-large;
    
    @media (max-width: 768px) {
      flex-direction: column;
      align-items: center;
    }
  }
  
  .pricing-card {
    background-color: $background-color-white;
    border-radius: $border-radius-base;
    padding: $spacing-large;
    box-shadow: $box-shadow-light;
    width: 280px;
    transition: $transition-base;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: $box-shadow-base;
    }
    
    .plan-name {
      font-size: $font-size-large;
      text-align: center;
      margin-bottom: $spacing-base;
    }
    
    .plan-price {
      text-align: center;
      margin-bottom: $spacing-base;
      
      .currency {
        font-size: $font-size-medium;
        vertical-align: top;
      }
      
      .amount {
        font-size: 32px;
        font-weight: bold;
      }
      
      .period {
        font-size: $font-size-small;
        color: $text-secondary;
      }
    }
    
    .plan-desc {
      text-align: center;
      color: $text-secondary;
      margin-bottom: $spacing-base;
    }
    
    .plan-features {
      margin-bottom: $spacing-large;
      
      li {
        display: flex;
        align-items: flex-start;
        margin-bottom: $spacing-small;
        
        .el-icon {
          color: $success-color;
          margin-right: $spacing-small;
          margin-top: 3px;
        }
      }
    }
    
    .el-button {
      width: 100%;
    }
  }
}

.cta-section {
  padding: $spacing-extra-large 0;
  background: linear-gradient(135deg, #1890ff 0%, #36a9e1 100%);
  color: white;
  text-align: center;
  
  .cta-title {
    font-size: $font-size-extra-large;
    margin-bottom: $spacing-small;
  }
  
  .cta-desc {
    font-size: $font-size-medium;
    margin-bottom: $spacing-large;
    opacity: 0.9;
  }
  
  .cta-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: $spacing-extra-large;
    
    @media (max-width: 768px) {
      flex-direction: column;
    }
    
    .qrcode-container {
      text-align: center;
      
      .qrcode {
        width: 120px;
        height: 120px;
        border-radius: $border-radius-small;
        background-color: white;
        padding: $spacing-small;
        margin-bottom: $spacing-small;
      }
      
      p {
        font-size: $font-size-small;
      }
    }
  }
}
</style> 